<template>
  <div class="address-container">
    <h3>地址管理</h3>
    <div class="address-content">
      <el-button type="primary" @click="showAddDialog">添加新地址</el-button>
      
      <div class="address-list">
        <el-table :data="addressList" style="width: 100%">
          <el-table-column prop="receiver" label="收货人" width="120"></el-table-column>
          <el-table-column prop="contact" label="联系方式" width="150"></el-table-column>
          <el-table-column prop="fullAddress" label="详细地址"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button size="small" @click="showEditDialog(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    
    <!-- 添加/编辑地址对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
      <el-form :model="addressForm" :rules="addressRules" ref="addressForm">
        <el-form-item label="收货人" prop="receiver">
          <el-input v-model="addressForm.receiver"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="addressForm.contact"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="region">
          <el-cascader 
            v-model="addressForm.region" 
            :options="regionOptions" 
            placeholder="请选择省/市/区">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="detail">
          <el-input v-model="addressForm.detail"></el-input>
        </el-form-item>
        <el-form-item label="是否默认" prop="isDefault">
          <el-switch v-model="addressForm.isDefault"></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddress">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 地址列表数据
const addressList = ref([
  {
    id: 1,
    receiver: '张三',
    contact: '13800138000',
    region: ['广东省', '深圳市', '南山区'],
    detail: '科技园路1号',
    isDefault: true,
    fullAddress: '广东省深圳市南山区科技园路1号'
  },
  {
    id: 2,
    receiver: '李四',
    contact: '13900139000',
    region: ['北京市', '朝阳区'],
    detail: '建国路88号',
    isDefault: false,
    fullAddress: '北京市朝阳区建国路88号'
  }
])

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('添加地址')
const currentAddressId = ref(null)

// 地址表单
const addressForm = ref({
  receiver: '',
  contact: '',
  region: [],
  detail: '',
  isDefault: false
})

// 表单验证规则
const addressRules = {
  receiver: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
  contact: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  region: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
  detail: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
}

// 地区选项
const regionOptions = [
  {
    value: '广东省',
    label: '广东省',
    children: [
      {
        value: '深圳市',
        label: '深圳市',
        children: [
          { value: '南山区', label: '南山区' },
          { value: '福田区', label: '福田' },
          { value: '罗湖区', label: '罗湖' }
        ]
      },
      {
        value: '广州市',
        label: '广州市',
        children: [
          { value: '天河区', label: '天河' },
          { value: '越秀区', label: '越秀' },
          { value: '海珠区', label: '海珠' }
        ]
      }
    ]
  },
  {
    value: '北京市',
    label: '北京市',
    children: [
      {
        value: '朝阳区',
        label: '朝阳区'
      },
      {
        value: '海淀区',
        label: '海淀区'
      },
      {
        value: '西城区',
        label: '西城区'
      }
    ]
  }
]

// 显示添加对话框
const showAddDialog = () => {
  dialogTitle.value = '添加地址'
  currentAddressId.value = null
  addressForm.value = {
    receiver: '',
    contact: '',
    region: [],
    detail: '',
    isDefault: false
  }
  dialogVisible.value = true
}

// 显示编辑对话框
const showEditDialog = (row) => {
  dialogTitle.value = '编辑地址'
  currentAddressId.value = row.id
  addressForm.value = {
    receiver: row.receiver,
    contact: row.contact,
    region: [...row.region],
    detail: row.detail,
    isDefault: row.isDefault
  }
  dialogVisible.value = true
}

// 提交地址
const submitAddress = () => {
  const fullAddress = addressForm.value.region.join('') + addressForm.value.detail
  
  if (currentAddressId.value) {
    // 编辑
    const index = addressList.value.findIndex(item => item.id === currentAddressId.value)
    if (index !== -1) {
      addressList.value[index] = {
        ...addressList.value[index],
        ...addressForm.value,
        fullAddress
      }
    }
    ElMessage.success('地址修改成功')
  } else {
    // 添加
    const newAddress = {
      id: addressList.value.length + 1,
      ...addressForm.value,
      fullAddress
    }
    addressList.value.push(newAddress)
    ElMessage.success('地址添加成功')
  }
  
  dialogVisible.value = false
}

// 删除地址
const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该地址吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = addressList.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      addressList.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
</script>

<style scoped lang="scss">
.address-container {
  padding: 20px;
  background: #fff;
  min-height: 500px;
  
  h3 {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .address-content {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .address-list {
    margin-top: 20px;
  }
}
</style>